<!-- 首页-人气推荐 -->
<template>
    <div class="home-hot">
        <!-- 这里ref属性，作用是标识所在div，在script中可以通过[this.$refs.hot]直接访问这个dom元素 -->
        <div class="container" ref="hot">
            <HomeTitle>
                <template v-slot:title>
                    <h3>人气推荐 <span>人气爆款 不容错过</span></h3>
                </template>
            </HomeTitle>

            <!-- 好物列表 -->
            <div class="home-content" v-if="result.length">
                <ul>
                    <li v-for="item in result" :key="item.id">
                        <router-link :to="`/goods/${item.id}`">
                            <img :src="item.picture" alt="" />
                            <p class="ellipsis">{{ item.title }}</p>
                            <p>{{ item.alt }}</p>
                        </router-link>
                    </li>
                </ul>
            </div>

            <HomeSkeleton father="426px" width="306px" height="406px" :number="4" v-else />
        </div>
    </div>
</template>
<script>
import HomeTitle from './home-title.vue'
import HomeSkeleton from './home-skeleton.vue';
import { getHot } from '@/api/home';
import observe from '@/utils/IntersectionObserve.js'
export default {
    name: 'home-hot',
    data() {
        return {
            result: []
        };
    },
    components: {
        HomeTitle,
        HomeSkeleton
    },
    mounted() {
        //增加页面滚动监听，在进入时进行数据加载
        observe(this.$refs.hot, () => {
            getHot().then(data => {
                this.result = data.data.result
            });
        })
    }
}
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';

.home-content {
    height: 426px;
    width: 100%;

    ul {
        width: 100%;
        display: flex;
        ;
        justify-content: space-between;
        height: 406px;

        li {
            width: 306px;
            height: 406px;
            background: #f0f9f4;
            transition: all 0.5s;

            a {

                img {
                    width: 306px;
                    height: 306px;
                    /*按宽高比例填充父容器，自身比例与父容器宽高比例不同时，可能会被裁剪*/
                    object-fit: cover;
                }

                p {
                    font-size: 22px;
                    padding: 12px 30px 0 30px;
                    text-align: center;

                    &:last-child {
                        color: #999;
                        font-size: 18px;
                    }
                }

            }

            &:hover {
                /* (0,-3px,0) 分别是x，y，z 三个方向的偏移值 */
                transform: translate3d(0, -3px, 0);
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            }
        }

    }

}</style>